<template>
  <BasicTable
    @register="registerTable"
  >
    <template #form-custom></template>
    <!--    <template v-if="checkedKeys.length > 0" #headerTop>
          <a-alert type="info" show-icon>
            <template #message>
              <template >
                <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
                <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
              </template>

            </template>
          </a-alert>
        </template>-->
    <template #toolbar>
      <a-button type="primary" @click="handleCreate"> 新增</a-button>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
      />
    </template>
  </BasicTable>
  <!--注册drawer  -->
  <ProfessionDrawer @register="registerDrawer" @success="handleSuccess"/>
</template>
<script lang="ts">
import {defineComponent, ref, onMounted} from 'vue';
import {BasicTable, PaginationProps, useTable, TableAction} from '/@/components/Table';
import {getBasicColumns, getFormConfig} from './professionTableData';
import {Alert} from 'ant-design-vue';
//编辑表单
import ProfessionDrawer from './ProfessionDrawer.vue';
//左侧拉板
import {useDrawer} from '/@/components/Drawer';
import {
  professionPageListApi,
  getProfessionVoByIdApi,
  logicalRemoveById
} from '/@/api/website/websiteProfessionApi';
import type {PaginationProps} from '/@/components/Table/src/types/pagination';
import {message} from 'ant-design-vue';
import {createFakeUserList} from "../../../../mock/sys/user";

export default defineComponent({
  components: {BasicTable, AAlert: Alert, ProfessionDrawer, TableAction},
  setup() {
    const [registerDrawer, {openDrawer}] = useDrawer();
    const checkedKeys = ref<Array<string | number>>([]);

    const [registerTable, {reload, getForm, setTableData, setPagination, setLoading}] = useTable({
      title: '专业管理',
      columns: getBasicColumns(),
      useSearchForm: true,
      formConfig: getFormConfig(),
      showTableSetting: true,
      rowKey: 'professionId',
      bordered: true,
      showIndexColumn: true,
      actionColumn: {
        width: 80,
        title: '操作',
        dataIndex: 'action',
        slots: {customRender: 'action'},
      },
      api: professionPageListApi,
      fetchSetting: {
        pageField: 'current',
        // 每页显示多少条
        sizeField: 'pageSize',
        // 请求结果列表字段  支持 a.b.c
        listField: 'records',
        totalField: 'total',

      },
    });

    /*async function loadTableData() {
      /!*setLoading(true);
      const searchForm = getForm().getFieldsValue();
      const responseData = await professionListApi(searchForm);
      const professionList = responseData.records;
      const pagination = ref<PaginationProps>({});
      pagination.current = responseData.current;
      pagination.total = responseData.total;
      setTableData(professionList);
      setPagination(pagination);
      console.log(pagination);
      setLoading(false);*!/
    }*/


    function handleCreate() {
      openDrawer(true, {
        isUpdate: false,
      });
    }

    async function handleEdit(record: Recordable) {
      const professionInfo = await getProfessionVoByIdApi(record.professionId);
      openDrawer(true, {
        professionInfo,
        isUpdate: true,
      });
    }

    async function handleDelete(record: Recordable) {
      await logicalRemoveById(record.professionId);
      message.success('删除成功');
      reload()
    }

    function handleSuccess() {
      reload();
    }

    onMounted(() => {
    });

    return {
      registerTable,
      checkedKeys,
      handleCreate,
      handleEdit,
      handleDelete,
      handleSuccess,
      registerDrawer
    };
  },
});
</script>
